<template>
    <div class="page-container">
        <div class="echarts-container" ref="main"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            myEcharts: null
        }
    },
    computed:{
        themeStatus(){
            return this.$store.state.theme
        }
    },
    watch:{
        themeStatus(){
            this.myEcharts.dispose()
            this.initEcharts()
            this.getData()
            this.screen()
        }
    },
    mounted() {
        this.initEcharts()
        this.getData()
        window.addEventListener('resize',this.screen)
        this.screen()
    },
    destroyed(){
        window.removeEventListener('reset',this.screen)
    },
    methods: {
        // 适配屏幕
        screen(){
            this.myEcharts.resize()
            // 计算一个文字大小的比例
            let width = this.$refs.main.offsetWidth
            let num = width / 100 * 4
            let options = {
                title:{
                    textStyle:{  // 设置主标题样式
                        fontSize:num
                    }
                }
            }
            // 修改图标样式以后要重绘
            this.myEcharts.setOption(options)
        },
        async initEcharts() {
            let main = this.$refs.main
            this.myEcharts = this.$echarts.init(main,this.themeStatus)            // 绘制地图的数据（地图的经纬度）
            let mapData = await this.$http('http://localhost:8080/map/china.json')
            this.$echarts.registerMap('china',mapData.data)
            /** @type EChartsOption */
            let options = {
                title: {
                    text: '各地区农作物覆盖面积',
                    left:10,
                    top:10
                },
                tooltip: {
                    show: true,
                },
                visualMap:{
                    show:true,
                    calculable:true,  // 是否显示拖动手柄
                    max:400,
                    min:100,
                    color:['#0F3357','#36BFE5']
                },
                series: [
                    {
                        type:'map',
                        map: 'china',
                        zoom: 1.2,   // 地图显示的大小
                        // center: [116.405285, 39.904989]   // 以哪个经纬度为中心点
                        // data:dataList.data.content,
                        label: {
                            show: true
                        },
                        left:'15%',
                        right:'15%',
                        top:'18%',
                        bottom: '10%',
                    }
                ],
            }
            this.myEcharts.setOption(options)
        },
        async getData(){
            let dataList = await this.$http('/api/CropCoverage')
            this.setEcharts(dataList)
        },
        setEcharts(dataList){
            let options = {
                series:[
                    {
                        data:dataList.data.content
                    }
                ]
            }
            this.myEcharts.setOption(options)
        }
    }
}
</script>

<style></style>